import React from 'react';
import { Avatar, List } from 'antd';
import styles from './NoticeList.less';

export default function NoticeList({
  data = [],
  onClick,
  onClear,
  title,
  locale,
  emptyText,
  emptyImage,
  onViewMore = null,
  showClear = true,
}) {
  if (data.length === 0) {
    return (
      <div className={styles.notFound}>
        {emptyImage ? <img src={emptyImage} alt="not found" /> : null}
        <div>{emptyText || locale.emptyText}</div>
      </div>
    );
  }

  const lists = [];
  for (let i = 0; i < data.length; i += 1) {
    const item = data[i];
    const leftIcon = (
      <Avatar className={styles.avatar} src={item.avatar} icon="file-text" shape="square" />
    );
    lists.push(
      <List.Item className={styles.item} key={item.id} onClick={() => onClick(item)}>
        <List.Item.Meta
          className={styles.meta}
          avatar={<span className={styles.iconElement}>{leftIcon}</span>}
          title={<div className={styles.title}>{item.title}</div>}
          description={<div className={styles.datetime}>{item.datetime}</div>}
        />
      </List.Item>
    );
  }

  return (
    <div>
      <List className={styles.list}>{lists}</List>
      <div className={styles.clear}>
        <a onClick={onViewMore}>更多</a>
      </div>
      {showClear ? (
        <div className={styles.clear} onClick={onClear}>
          {locale.clear}
          {title}
        </div>
      ) : null}
    </div>
  );
}
